<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>E接口监测系统</title>
    <link rel="stylesheet" type="text/css" th:href="@{/element-ui/lib/theme-chalk/index.css}"/>
    <link th:href="@{/css/other.css}" rel="stylesheet"/>
    <link th:href="@{/svg/iconfont.css}" rel="stylesheet"/>
</head>
<body>
<div id="app" class="pd-20">
    <div>
        <div style="display: flex;" class="bg-iframe-bar">
            <div class="iframe-bar-el-row">
                <div>
                    <el-date-picker
                            v-model="form.startTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="触发时间"
                    >
                    </el-date-picker>
                    <el-date-picker
                            v-model="form.endTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="结束时间"
                    >
                    </el-date-picker>
                    <el-input
                            placeholder="主叫IMSI"
                            v-model="form.vcCallingImsi"
                            clearable>
                    </el-input>
                    <el-input
                              placeholder="被叫IMSI"
                              v-model="form.vcCalledImsi"
                              clearable>
                    </el-input>
                    <el-select v-model="form.intOpc"
                               placeholder="OPC" clearable>
                        <el-option
                                v-for="item in opcOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="form.intDpc"
                               placeholder="DPC" clearable>
                        <el-option
                                v-for="item in opcOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div >
                    <el-button id="queryBtn" type="primary"
                               @click="queryData()"
                    ><i class="iconfont ">&#xe639;</i>查询
                    </el-button>
                    <el-button id="queryBtn"
                               @click="resetForm()"
                    ><i class="iconfont ">&#xe628;</i>重置
                    </el-button>
                    <el-button id="exportBtn"
                               @click="exportData()"
                    ><i class="iconfont ">&#xe643;</i>导出
                    </el-button>
                </div>
            </div>
        </div>

        <div style="display: flex;" class="bg-iframe-tab">
            <template>
                <div style="display: flex;flex-direction:column;width: 100% !important;max-height:100%">
                    <el-table
                            ref="listData"
                            :data="listData"
                            v-loading="loading"
                            :header-cell-style="headStyle"
                            border
                            :height="'100% !important'"
                            :cell-style="rowStyle"
                            @selection-change="handleSelectionChange"
                            style="max-width: 100%!important">
                        <el-table-column type="index" label="序号" width="60" :index="typeIndex" fixed="left" :resizable="false"></el-table-column>
                        <el-table-column prop="biSessID" width="180" label="会话标识" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="dtsTime" width="250" label="触发时间" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCallingImsi" width="200" label="主叫IMSI" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCalledImsi" width="200" label="被叫IMSI" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
<!--                        <el-table-column prop="interfaceID" width="120" label="接口类型" :show-overflow-tooltip='true' :resizable="false"></el-table-column>-->
                        <el-table-column prop="zhuJiaoZhongDuan" width="120" label="主叫终端" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCallingNumber" width="120" label="主叫号码" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCalledNumber" width="120" label="被叫号码" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="beiJiaoZhongDuan" width="200" label="被叫终端" :show-overflow-tooltip='true' :resizable="false" ></el-table-column>
                        <el-table-column prop="vcCallingFN" width="120" label="主叫功能号" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCalledFN" width="120" label="被叫功能号" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCallingGT" width="180" label="主叫GT" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCalledGT" width="180" label="被叫GT" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCallingTrainID" width="120" label="主叫机车号" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="vcCalledTrainID" width="120" label="被叫机车号" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intOpc" width="120" label="OPC" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intDpc" width="120" label="DPC" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intSLS" width="120" label="SLS" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intCallingSSN" width="120" label="主叫SSN" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intCalledSSN" width="120" label="被叫SSN" :show-overflow-tooltip='true' :resizable="false"></el-table-column>

                        <el-table-column prop="vcInfo" width="300" label="MAP类型" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intMTPType" width="250" label="MAP消息类型" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intSCcPType" width="120" label="SccP消息类型" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intTcapMessageType" width="180" label="Tcap类型" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intErrCode" width="180" label="Map错误码" :show-overflow-tooltip='true' :resizable="false"></el-table-column>

                        <el-table-column prop="vcTacpOtid" width="200" label="TacpOtid" :show-overflow-tooltip='true' :resizable="false" ></el-table-column>
                        <el-table-column prop="vcTacpDtid" width="120" label="TacpDtid" :show-overflow-tooltip='true' :resizable="false"></el-table-column>

                        <el-table-column prop="cgi" width="120" label="源CGI" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="bsc" width="120" label="源BSC" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="xiaoQu" width="120" label="源小区" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="cqiMu" width="180" label="目标CGI" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="bscMu" width="180" label="目标BSC" :show-overflow-tooltip='true' :resizable="false"></el-table-column>

                        <el-table-column prop="intCardNo" width="120" label="设备号" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intCardPort" width="120" label="端口号" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intCardSlot" width="180" label="时隙号" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intLinkName" width="180" label="链路名称" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="intTotalLen" width="180" label="数据长度" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                        <el-table-column prop="sourceData" width="120" label="数据内容" :show-overflow-tooltip='true' :resizable="false"></el-table-column>
                    </el-table>
                    <div style="margin-top: 20px;margin-bottom:20px;width: 100%">
                        <el-pagination
                                background
                                style="float: right"
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[10, 25, 50, 100]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
            </template>
        </div>

    </div>

</div>

</body>
<input id="ctxPath" th:value="${#httpServletRequest.getContextPath()}" hidden>
</html>
<script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{/vue/vue.js}"></script>
<script type="text/javascript" th:src="@{/vue/moment.min.js}"></script>
<script type="text/javascript" th:src="@{/element-ui/lib/index.js}"></script>
<script type="module" th:src="@{/templatesJs/EInterface/EInterfaceMapList.js}"></script>


